<template>
    <div class="top">
       <img :src="icon" alt="图标">
    </div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="background-color: #ffffff;">
      <el-menu-item index="1" style="font-size: 20px; margin-left: 270px;" @click="userhome">{{$t('manager.HomePage')}}</el-menu-item>
      <el-menu-item index="2" style="font-size: 20px; margin-left: 60px;" @click="usercourse">{{$t('manager.Course')}}</el-menu-item>
      <el-menu-item index="3" style="font-size: 20px; margin-left: 60px;" @click="userclass">{{$t('manager.Class')}}</el-menu-item>
      <el-menu-item index="4" style="font-size: 20px; margin-left: 60px;" @click="learningcenter">{{$t('manager.StudentCenter')}}</el-menu-item>
      <el-menu-item index="5" style="font-size: 20px; margin-left: 60px;" @click="getusers">{{$t('manager.PersonalInformation')}}</el-menu-item>
      <el-button type="primary" round @click="logout" style="margin-left: 195px;margin-top: 10px;">{{$t('manager.Logout')}}</el-button>
      <el-button type="primary" round @click="getTea" style="margin-top: 10px;">{{$t('manager.TeacherEnd')}}</el-button>
   </el-menu>
   
 </template>
 <script>
 import { ref } from "vue";
    export default {
      name: '',
      data: function(){
        return {
          icon: require('../assets/ntt.png'),
        }
      },
      methods:{
         logout(){
             window.sessionStorage.clear("token");
             this.$router.push("login");
         },
         userhome(){
          this.$router.push("homepage");
         },
         usercourse(){
          this.$router.push("stucourse");
         },
         userclass(){
          this.$router.push("stuclass");
         },
         learningcenter(){
          this.$router.push("learningcenter");
         },
         getusers(){
          this.$router.push("stuusers");
         },
         getTea(){
            this.$router.push({
                    name:"department"
                  });
         }
    },
    setup(){
      const activeIndex = ref('1')
      return{
         activeIndex
      }
    }
 }
 </script>
 <style>
 .user{
    font-size: 20px;
    position: absolute;
    top: 55px;
    right: 30px;
 }
 .btn{
 
    font-size: 15px;
 
    font-size: 20px;
 }
 .userbtn{
    margin-left: 1420px;
 }
 
 </style>
 